<template>
  <!-- 设置可查看人员 -->
  <el-dialog
    v-model="props.visible"
    width="800px"
    :show-close="false"
    :close-on-click-modal="false"
    :before-close="handleClose"
  >
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4
          :id="titleId"
          :class="titleClass"
        >
          {{ t('externalAssistance.ConfigPerson.title') }}
        </h4>
        <img
          src="@/assets/img/icon_guanbi.png"
          @click="close"
          class="close"
        />
      </div>
    </template>

    <div class="flexcc" style="padding: 0 125px;">
      <div style="text-align: center;">{{ t('externalAssistance.ConfigPerson.t1') }}</div>
    </div>
    <!-- <div class="flexcc mt-1">{{ t('externalAssistance.ConfigPerson.t2') }}</div> -->

    <div class="checkList flexcc mt-2">
      <el-checkbox-group v-model="checkList">
        <el-checkbox
          :label="item.id"
          v-for="item in personList"
          :key="item.id"
        >
          {{ item.userName }}
        </el-checkbox>
      </el-checkbox-group>
    </div>

    <template #footer>
      <div class="dialog-footer flexcc">
        <el-button
          color="#252628"
          plain
          @click="cancel"
        >
          {{ t('cancelText') }}
        </el-button>
        <el-button
          type="primary"
          color="#252628"
          @click="confirm"
        >
          {{ t('confirmText') }}
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { onBeforeMount, ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import useLogin from '@/stores/login'
import useExternalAssistance from '@/stores/externalAssistance.js'
import { customerListApi, dealCanViewPersonApi } from '@/service/common'

const storeLogin = useLogin()
const store = useExternalAssistance()
const { next, back } = store

onBeforeMount(() => {
  init()
})

const { t, locale } = useI18n()

const router = useRouter()
const route = useRoute()

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  saveType: {
    type: String,
    default: 'save' //  save保存  next下一步 back上一步
  },
  // 回显 - 勾选的人员列表
  canViewPerson: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['close'])

const handleClose = () => {
  emit('close')
}

// 取消
const cancel = () => {
  handleClose()
}
// 确定
const confirm = () => {
  dealCanViewPersonApi({
    objId: store.orderInfo.id,
    objTable: 'shcw_assist_order',
    canViewPerson: checkList.value
  }).then(({ msg }) => {
    ElMessage.success(msg)
    handleClose()

    // 下一步
    if (props.saveType === 'next') {
      next()
    }

    // 上一步
    if (props.saveType === 'back') {
      back()
    }
  })
}

// 人员列表
const personList = ref([])
const getPerconList = () => {
  customerListApi({
    enterpriseId: storeLogin.userInfo.enterpriseId
  }).then(({ rows }) => {
    personList.value = rows.filter((item) => item.id !== storeLogin.userInfo.id)
  })
}

// 勾选的人员列表
const checkList = ref([])
if (props.canViewPerson.length) {
  checkList.value = props.canViewPerson
}

const init = () => {
  getPerconList()
}
</script>

<style scoped lang="scss"></style>
